<template>
  <view class="collect">
    <scroll-view :scroll-y="true" @scrolltolower="scrolltolower">
      <view class="up-block">
        <div class="header">
          <div class="left">学习记录 <text class="tag">线上课程</text></div>
          <div class="right">
            学习时长：<text class="tag">{{ all_study_duration }}</text>
          </div>
        </div>
        <div class="all-block">
          <div class="list" v-if="list.length > 0">
            <div
              class="block"
              v-for="(item, index) in list"
              :key="index"
              v-if="upIsMore ? true : index < 2"
            >
              <div class="left" @click="onDetail(item.id)">
                <u-image
                  height="186rpx"
                  width="148rpx"
                  :src="item.cover"
                  radius="10rpx"
                ></u-image>
              </div>
              <div class="center" @click="onDetail(item.id)">
                <div class="name">{{ item.name }}</div>
                <div class="tag-style">
                  学习进度：<u-line-progress
                    :percentage="item.study_schedule"
                    activeColor="#EB5E15"
                  ></u-line-progress>
                </div>
                <div class="tag">课程章节：{{ item.study_chapter.title }}</div>
                <div class="tag">课程时效：{{ item.study_duration_desc }}</div>
              </div>
            </div>
          </div>
          <view class="empty-style" v-else>
            <u-empty mode="order" iconSize="120" text="数据为空"> </u-empty>
          </view>
        </div>
        <view
          class="isMore"
          v-if="list.length > 2 && !upIsMore"
          @click="onUpLook"
          >查看更多</view
        >
      </view>
      <view class="up-block">
        <div class="header">
          <div class="left">学习记录 <text class="tag">线下课程</text></div>
          <div class="right">
            学习时长：<text class="tag">{{ all_study_duration2 }}</text>
          </div>
        </div>
        <div class="all-block">
          <div class="list" v-if="list2.length > 0">
            <div
              class="block"
              v-for="(item, index) in list2"
              :key="index"
              v-if="downIsMore ? true : index < 2"
            >
              <div class="left" @click="onDetail(item.id)">
                <u-image
                  height="186rpx"
                  width="148rpx"
                  :src="item.cover"
                  radius="10rpx"
                ></u-image>
              </div>
              <div class="center" @click="onDetail(item.id)">
                <div class="name">{{ item.name }}</div>
                <div class="tag">
                  学习时长：
                  <text
                    style="color: #e04411; font-weight: bold; font-size: 30rpx"
                    >{{ item.study_duration_desc }}</text
                  >
                </div>
                <div class="tag">任务地点：{{ item.address }}</div>
                <div class="tag">课程时效：{{ item.end_date }}</div>
              </div>
            </div>
          </div>
          <view class="empty-style" v-else>
            <u-empty mode="order" iconSize="120" text="数据为空"> </u-empty>
          </view>
        </div>
        <view
          class="isMore"
          v-if="list2.length > 2 && !downIsMore"
          @click="ondownLook"
          >查看更多</view
        >
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { cancelCollect, getMystudyLog } from "apis/modules/user";
import { getStorage } from "utils/auth";
export default {
  name: "collect",

  data() {
    return {
      downIsMore: false,
      upIsMore: false,
      all_study_duration2: "0H",
      all_study_duration: "0H",
      current: 0,
      page: 1,
      isMore: false,
      list: [],
      list2: [],
      type: 1,
      typeList: [
        { type: 1, name: "线上" },
        { type: 2, name: "线下" },
      ],
    };
  },

  onLaunch() {},
  onLoad() {
    this.page = 1;
    this.courseList();
    this.courseList2();
  },
  onShow() {},
  onHide() {},
  methods: {
    onUpLook() {
      this.upIsMore = true;
    },
    ondownLook() {
      this.downIsMore = true;
    },
    change(e) {
      console.log(e);
      this.type = this.typeList[e].type;
      this.current = e;
      this.page = 1;
      this.courseList();
    },
    oncancelCollect(course_id) {
      cancelCollect({ course_id }).then((res) => {
        uni.showToast({
          title: "已取消收藏",
          duration: 2000,
        });
        this.page = 1;
        this.courseList();
      });
    },
    scrolltolower() {
      // if (this.isMore) {
      //   return false;
      // }
      // this.page++;
      // this.courseList();
    },
    onDetail(course_id) {
      let token = !!getStorage("token");
      if (token) {
        this.$Router.push({
          path: `/pagesA/onlineDetail/onlineDetail?course_id=${course_id}`,
        });
      } else {
        this.show = true;
      }
    },
    courseList() {
      let data = {
        type: 1,
        page: this.page,
      };
      getMystudyLog(data).then((result) => {
        let list = result.list || [];
        this.all_study_duration = result.all_study_duration || "0Hs";
        // list = [...list, ...list, ...list];
        if (data.page == 1) {
          this.list = list;
        } else {
          this.list = this.list.concat(list);
        }
        // this.isMore = result.length <= 0;
      });
    },
    courseList2() {
      let data = {
        type: 2,
        page: this.page,
      };
      getMystudyLog(data).then((result) => {
        console.log(result);
        let list = result.list || [];
        // list=list.map(item=>{
        //   item['percentage']=item['duration']/
        //   return item
        // })
        this.all_study_duration = result.all_study_duration || "0Hs";
        if (data.page == 1) {
          this.list2 = list;
        } else {
          this.list2 = this.list.concat(list);
        }
        // this.isMore = result.length <= 0;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.collect {
  background: #eeeeee;
  opacity: 1;
  min-height: 100vh;
  .up-block {
    background: #fff;
    padding: 20rpx 30rpx 0;
    border-radius: 20rpx;
    margin: 20rpx;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30rpx;
      .left {
        font-weight: 600;
        .tag {
          font-weight: 400;
          margin-left: 20rpx;
          color: #eb5e15;
          font-size: 24rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .right {
        font-size: 24rpx;
        color: #999;
        .tag {
          font-weight: 400;
          margin-left: 20rpx;
          color: #eb5e15;
          font-size: 24rpx;
        }
      }
    }

    .block {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: #fff;
      padding: 20rpx 0;
      margin: 20rpx 0;
      .left {
        flex-shrink: 0;
        margin-right: 20rpx;
      }
      .center {
        flex: 1;
        font-size: 24rpx;
        color: #333333;
        .name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
          margin-bottom: 20rpx;
        }
        .tag-style {
          height: 70rpx;
          display: flex;
          align-items: center;
        }
      }
      .right {
        flex-shrink: 0;
        padding: 0 20rpx;
      }
    }
    .empty-style {
      padding: 40rpx 0;
    }
    .isMore {
      text-align: center;
      height: 90rpx;
      color: #999;
      font-size: 30rpx;
      line-height: 90rpx;
      border-top: 2rpx solid #eeeeee;
    }
  }
}
</style>
